<template>
	<view class="page">
		<!-- 		使用自定义标签 
		<helloComp myval="11111~~"></helloComp>
		<trailerStars innerScore="8" showNum="1"></trailerStars> -->
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" class="carousel">
			<!-- 			<swiper-item>
				<image src="../../static/carousel/batmanvssuperman.png"  class="carousel"></image>
			</swiper-item>
			<swiper-item>
				<image src="../../static/carousel/spiderman.png" class="carousel"></image>
			</swiper-item> -->
			<swiper-item v-for="carousel in carouselList">
				<navigator open-type="navigate" :url="'../movie/movie?trailerId=' + carousel.movieId">
					<image :src="carousel.image" class="carousel"></image>
				</navigator>
			</swiper-item>
		</swiper>
		<!-- 热门超英 start-->
		<view class="page-block super-hot">
			<view class="hot-title-wapper">
				<image src="../../static/icos/hot.png" class="hot-ico"></image>
				<view class="hot-title">
					超英热门
				</view>
			</view>
		</view>
		<scroll-view scroll-x="true" class="page-block hot">
			<view class="single-poster" v-for="superhero in hotSuperheroList">
				<view class="poster-wapper">
					<navigator open-type="navigate" :url="'../movie/movie?trailerId=' + superhero.id">
						<image :src="superhero.cover" class="poster"></image>
					</navigator>
					<view class="movie-name">
						{{superhero.name}}
					</view>
					<trailerStars :innerScore="superhero.score" showNum="1"></trailerStars>
					<!-- 					<view class=" movie-score-wapper">
						<image src="../../static/icos/star-yellow.png" class="star-ico"></image>
						<image src="../../static/icos/star-yellow.png" class="star-ico"></image>
						<image src="../../static/icos/star-yellow.png" class="star-ico"></image>
						<image src="../../static/icos/star-yellow.png" class="star-ico"></image>
						<image src="../../static/icos/star-gray.png" class="star-ico"></image>
						<view class="movie-score">
							9.1
						</view>
					</view> -->
				</view>
			</view>
		</scroll-view>

		<view class="page-block super-hot">
			<view class="hot-title-wapper">
				<image src="../../static/icos/interest.png" class="hot-ico"></image>
				<view class="hot-title">
					热门预告
				</view>
			</view>
		</view>
		<view class="hot-movies page-block">
			<video :id="trailer.id" :data-playingindex="trailer.id" @play="meIsPlaying" v-for="trailer in hotTrailerList" :src="trailer.trailer"
			 :poster="trailer.poster" class="hot-movies-single" controls></video>
		</view>
		<view class="page-block super-hot">
			<view class="hot-title-wapper">
				<image src="../../static/icos/guess-u-like.png" class="hot-ico"></image>
				<view class="hot-title">
					猜你喜欢
				</view>
			</view>
		</view>
		<view class="page-block guess-u-like">
			<view class="single-like-movie" v-for="(guess,gIndex) in guessULikeList">
				<navigator open-type="navigate" :url="'../movie/movie?trailerId=' + guess.id">
					<image :src="guess.cover" class="like-movie"></image>
				</navigator>
				<view class="movie-desc">
					<view class="movie-title">
						{{guess.name}}
					</view>
					<trailerStars :innerScore="9.0" showNum="0"></trailerStars>
					<view class="movie-info">
						{{guess.basicInfo}}
					</view>
					<view class="movie-info">
						{{guess.releaseDate}}
					</view>
				</view>
				<view class="movie-oper" :data-gIndex="gIndex" @click="praiseMe">
					<image src="../../static/icos/praise.png" class="praise-ico"></image>
					<view class="praise-me">
						点赞
					</view>
					<view :animation="animationDataArr[gIndex]" class="praise-me animation-opacity">
						+1
					</view>
				</view>
			</view>
			<!-- 		<view class="single-like-movie">
				<image src="http://122.152.205.72:88/superhero/xman/Deadpool2/cover.png" class="like-movie"></image>
				<view class="movie-desc">
					<view class="movie-title">
						ddddd
					</view>
<trailerStars :innerScore="9.0" showNum = "0"></trailerStars>
					<view class="movie-info">
						ddddddddddd
					</view>
					<view class="movie-info">
						4444444444444
					</view>
				</view>
				<view class="movie-oper"@click="praiseMe">
					<image src="../../static/icos/praise.png" class="praise-ico"></image>
					<view class="praise-me">
						点赞
					</view>
					<view :animation="animationData" class="praise-me animation-opacity">
						+1
					</view>
				</view>
		</view> -->
		</view>
	</view>
</template>

<script>
	//导入自定义 组件   
	import helloComp from "../../components/helloComp.vue";
	import trailerStars from "../../components/trailerStars.vue";
	// import common from "../../common/common.js";	 
	export default {
		data() {
			return {
				carouselList: [],
				hotSuperheroList: [],
				hotTrailerList: [],
				guessULikeList: [],
				animationData: {},
				animationDataArr: [{}, {}, {}, {}, {}]
			}
		},
		onUnload() {
			//页面卸载时候
			this.animationData = {};
			this.animationDataArr = [{}, {}, {}, {}, {}];
		},
		onPullDownRefresh() {
			this.refresh();
		},
		onHide() {
			if (this.videoContext) {
				this.videoContext.pause();
			}
		},
		onLoad() {
			var me = this;
			// #ifdef APP-PLUS || MP-WEIXIN
			// debugger;	
			//在页面创建时候 创建一个临时动画对象
			this.animation = uni.createAnimation();
			// #endif
			//获取common。js的服务器地址
			// var serverUrl = common.serverUrl;
			var serverUrl = me.serverUrl;
			//请求轮播图数据
			uni.request({
				url: serverUrl + '/index/carousel/list?qq=lee' + this.阿亮,
				method: "POST",
				success: (res) => {
					// console.log(res.data);
					//获取真实数据 判断状态是否是 200
					if (res.data.status == 200) {
						var carouselList = res.data.data;
						me.carouselList = carouselList;
					}
				}
			});
			// '/index/movie/hot?type=superhero&qq=lee53883447'
			uni.request({
				url: serverUrl + '/index/movie/hot?type=superhero&qq=lee' + this.阿亮,
				method: "POST",
				success: (res) => {
					// console.log(res.data);
					// debugger;
					//获取真实数据 判断状态是否是 200
					if (res.data.status == 200) {
						var hotSuperheroList = res.data.data;
						me.hotSuperheroList = hotSuperheroList;
					}
				}
			});
			uni.request({
				url: serverUrl + '/index/movie/hot?type=trailer&qq=lee' + this.阿亮,
				method: "POST",
				success: (res) => {
					// console.log(res.data);
					// debugger;
					//获取真实数据 判断状态是否是 200
					if (res.data.status == 200) {
						var hotTrailerList = res.data.data;
						me.hotTrailerList = hotTrailerList;
					}
				}
			});
			me.refresh();
		},
		// onLoad2() {
		// 	var me = this;
		// },


		methods: {
			//播放视频暂停其他
			meIsPlaying(e) {
				var me = this;
				var trailerId = "";
				if (e) {
					trailerId = e.currentTarget.dataset.playingindex;
					me.videoContext = uni.createVideoContext(trailerId);
				}
				var hotTrailerList = me.hotTrailerList;
				for (var i = 0; i < hotTrailerList.length; i++) {
					var tempId = hotTrailerList[i].id;
					if (tempId != trailerId) {
						uni.createVideoContext(tempId).pause();
					}
				}
			},
			refresh() {
				var me = this;

				uni.showLoading({
					mask: true
				});
				uni.showNavigationBarLoading();
				var serverUrl = me.serverUrl;
				//猜你喜欢数据列表
				uni.request({
					url: serverUrl + '/index/guessULike?qq=lee64775104',
					method: "POST",
					success: (res) => {
						//获取真实数据 判断状态是否是 200
						if (res.data.status == 200) {
							var guessULikeList = res.data.data;
							me.guessULikeList = guessULikeList;
						}
					},
					complete: () => {
						uni.hideNavigationBarLoading();
						uni.hideLoading();
						uni.stopPullDownRefresh();
					}
				});
			},
			praiseMe(e) {
				// #ifdef APP-PLUS || MP-WEIXIN 
				var gIndex = e.currentTarget.dataset.gindex;
				console.log(gIndex)
				// return;
				this.animation.translateY(-60).opacity(1).step({
					duration: 400
				});
				//导出动画数据view 实现组件的动画
				// this.animationData = this.animation.export();
				this.animationData = this.animation;
				this.animationDataArr[gIndex] = this.animationData.export();


				setTimeout(function() {
					this.animation.translateY(0).opacity(0).step({
						duration: 0
					});
					this.animationData = this.animation;
					this.animationDataArr[gIndex] = this.animationData.export();
				}.bind(this), 500)
				// #endif
			}
		},
		components: {
			helloComp,
			trailerStars
		}
	}
</script>

<style>
	@import url("index.css");
</style>
